<template>
  <div class="main_right_nav">
    <div class="main_right_nav_1">
      <div class="main_right_nav_1_publish">
        发表问题
      </div>
      <div class="main_right_nav_1_button">
        <a-button @click="showModal" type="primary" size="large">
          点我上传
        </a-button>
      </div>
    </div>

    <a-modal
        v-model:visible="visible"
        title="上传问题"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        cancelText="取消"
        okText="确认"
    >
      <!--      <a-input v-model:value="uploadProblem.title" placeholder="请输入问题" showCount autoSize allow-clear/>-->
      <a-textarea
          v-model:value="uploadProblem.title"
          placeholder="请输入问题"
          :auto-size="{ minRows: 2, maxRows: 5 }"
          showCount
          autoSize
          allow-clear
      />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {upload} from "@/api/home/answer";
import {UploadProblem} from "@/model/home/answer";
// @ts-ignore
import Publish from 'pubsub-js'
// @ts-ignore
import cookie from 'js-cookie'
import {message} from "ant-design-vue";
import {getText, isNull} from "@/utils/checkoutInput";
import {checkUserLogin} from "@/utils/getUser";

//上传问题所需的参数
const uploadProblem = ref<UploadProblem>({
  title: '',
  userId: 0,
  nickname: '',
  avatar: ''
})

//是否显示对话框
const visible = ref<boolean>(false);
//加载中
const confirmLoading = ref<boolean>(false);

//显示对话框
const showModal = async () => {
  if (!await checkUserLogin()) {
    message.warn('未登录，无法上传')
  } else {
    visible.value = true;
  }
};

//点击确认后执行的事件
const handleOk = () => {
  //校验消息是否为空
  let checkContent = getText(uploadProblem.value.title)
  if (uploadProblem.value.title === '' || isNull(checkContent)) {
    message.warn("问题不能为空！")
  } else if (checkContent.length <= 5) {
    message.warn("不能少于5个字符哦！")
  } else if (uploadProblem.value.userId === 0) {
    message.warn("未登录,无权限上传问题！")
  } else {
    confirmLoading.value = true;
    setTimeout(() => {
      visible.value = false;
      confirmLoading.value = false;
      //上传问题
      upload(uploadProblem.value).then((res) => {
        uploadProblem.value.title = ''
        Publish.publish('handleList')
        message.success(res.data.message)
      })
    }, 2000);
  }
};

//获取用户id和昵称
const getUserIdAndNickname = () => {
  if (cookie.get('userinfo') != null) {
    uploadProblem.value.userId = JSON.parse(cookie.get('userinfo')).id
    uploadProblem.value.nickname = JSON.parse(cookie.get('userinfo')).nickname
    uploadProblem.value.avatar = JSON.parse(cookie.get('userinfo')).avatar
  } else {
    uploadProblem.value.userId = 0
    uploadProblem.value.nickname = ''
  }
}

getUserIdAndNickname()
</script>

<style lang="less" scoped>
.main_right_nav {
  background-color: #ffffff;
  margin-left: 10px;
  padding: 3px;

  .main_right_nav_1 {
    box-shadow: rgba(3, 102, 214, 0.3) 0 0 0 3px;
    padding: 10px;
    font-weight: bold;

    .main_right_nav_1_publish {
      text-align: center;
      font-size: 20px;
      border-bottom: 1px solid #f0f0f0;
    }

    .main_right_nav_1_button {
      text-align: center;
      padding: 30px;
    }
  }


}
</style>